<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>编辑</title>
	<link href="css/layui.css" rel="stylesheet">
</head>
<body>
	<div class="layui-container" style="margin-top: 10px;">
		<div class="layui-row">
			<div class="layui-col-md8 layui-col-md-offset4">
				<form class="layui-form layui-form-pane">
					<input type="hidden" name="bookId" id="bookId"/>
				  <div class="layui-form-item">
				    <label class="layui-form-label">图书名称</label>
				    <div class="layui-input-block">
				      <input type="text" id="bookName" name="bookName" autocomplete="off" placeholder="图书名称..." lay-verify="required" class="layui-input">
				    </div>
				  </div>
				  
				  <div class="layui-form-item">
				    <label class="layui-form-label">图书作者</label>
				    <div class="layui-input-block">
				      <input type="text" id="authorName" name="authorName" autocomplete="off" placeholder="图书作者..." lay-verify="required" class="layui-input">
				    </div>
				  </div>
				  
				  <div class="layui-form-item">
				    <label class="layui-form-label">图书价格</label>
				    <div class="layui-input-block">
				      <input type="text" id="price"  name="price" autocomplete="off" placeholder="图书价格..." lay-verify="required" class="layui-input">
				    </div>
				  </div>
				  
				  <div class="layui-form-item">
				    <label class="layui-form-label">图书封面</label>
				    <div class="layui-input-block">
						<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
						  <i class="layui-icon layui-icon-upload"></i> 
						  <div>点击上传，或将文件拖拽到此处</div>
						  <div id="ID-upload-demo-preview">
						    <hr> <img id="picId" src="" alt="上传成功后渲染" style="max-width: 100%">
						  </div>
						</div>
				    </div>
				  </div>
				  
				  <!-- 隐藏域 -->
				  <input type="hidden" name="bookAddress" id="bookAddress"/>
				  <input type="hidden" name="bookUrl" id="bookUrl"/>
				  
				  
			
				  <div class="layui-form-item">
				    <label class="layui-form-label">图书分类</label>
				    <div class="layui-input-inline">
				      <select name="categoryId" id="categoryId">
				        
				      </select>
				    </div>
				  </div>
				  
				  <div class="layui-form-item" pane>
				    <label class="layui-form-label">是否上架</label>
				    <div class="layui-input-block" id="status">
				      
				    </div>
				  </div>
				 
				 <div class="layui-form-item" pane>
				   <label class="layui-form-label">创建时间</label>
				   <div class="layui-input-inline">
				           <input type="text" class="layui-input" name="createTime" id="createTime" placeholder="yyyy/MM/dd HH:mm:ss">
				         </div>
				 </div>
				 
				  <div class="layui-form-item">
				    <button class="layui-btn" lay-submit lay-filter="edit">更新图书</button>
				  </div>
				</form>
			</div>
		</div>
	</div>
	
	
	<script src="//unpkg.com/layui@2.11.5/dist/layui.js"></script> 
	<script>
		
		layui.use(function(){
			let laydate = layui.laydate;
			let $ = layui.$;
			let layer = layui.layer;
			let form = layui.form
			let upload = layui.upload
			
			//获取当前页面地址
			let url = location.href;
			
			let param = url.substring(url.lastIndexOf("?")+1,url.length);
			// console.log(param)
			let ps = param.split("&");
			let obj = {};
			if(ps && ps.length>0){
				for (let i = 0; i < ps.length; i++) {
					let psList = ps[i].split("=");
					obj[psList[0].trim()]=psList[1].trim();
				}
			}
			// console.log(obj);
			
			//单选框回显
			let str='';
			if(obj.status==1){
				str+='<input type="radio" name="status" value="1" title="上架" checked>';
				str+='<input type="radio" name="status" value="0" title="下架">';
			}else{
				str+='<input type="radio" name="status" value="1" title="上架" >';
				str+='<input type="radio" name="status" value="0" title="下架" checked>';
			}
			//将拼接好的单选框设置到指定位置
			$("#status").html(str)
			//重新渲染
			form.render('radio');
			
			//表单提交事件
			form.on("submit(edit)",function(data){
				let field = data.field;
				console.log(field);
				//Ajax向后端发送请求
				$.ajax({
					type:"post",
					url:"http://localhost:8080/updateBook",
					data:JSON.stringify(field),
					contentType:'application/json',
					dataType:"json",
					success:function(d){
						if(d.code==0){
							//关闭弹出层
							let index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
						}else{
							layer.msg(d.msg);
						}
					}	
				});
				//阻止表单默认提交
				return false;
				
				
			})
			
			
			
			//图片上传
			 upload.render({
			    elem: '#ID-upload-demo-drag',
			    url: 'http://localhost:8080/uploadFile', // 实际使用时改成您自己的上传接口即可。
			    done: function(res){
			      console.log(res);
				  
				  //将图片的服务器地址和本机的真实地址设置到对应的隐藏域中
				  $("#bookAddress").val(res.data.bookAddress);
				  $("#bookUrl").val(res.data.bookUrl);
				  
			      $('#ID-upload-demo-preview').find('img').attr('src', "http://localhost:8080"+res.data.bookUrl);
			    }
			  });
			
			//获取图书分类信息
			$.getJSON("http://127.0.0.1:8080/getCategoryList",function(d){
				if(d.code==0){
					let list = d.data;
					let s = '<option value=""></option>';
					for (let i = 0; i < list.length; i++) {
						
						if(obj.categoryId==list[i].categoryId){
							s+='<option selected value="'+list[i].categoryId+'">'+list[i].categoryName+'</option>'
						}else{
							s+='<option value="'+list[i].categoryId+'">'+list[i].categoryName+'</option>'
						}
						
						
					}
					//将拼接好的字符串设置到分类的位置
					$("#categoryId").html(s);
					//重新渲染表单的下拉框
					form.render('select');
					
					
				}else{
					layer.msg(d.msg);
				}
			});
			
			//生成时间控件
			laydate.render({
			    elem: '#createTime',
			    type: 'datetime',
				format: 'yyyy/mm/dd HH:mm:ss'
			  });
		})
	</script>
	
</body>
</html>